<script setup>
import post from './components/post.vue';
import SimplePost from '@/components/SimplePost/index.vue'
import { computed, onMounted, ref, } from 'vue';
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router';
import { getCategoryPostListApi } from '@/apis/post';
import { getSimplePostApi, getCategoryAllSimplePostApi } from '@/apis/simplePost';
const router = useRouter();
const route = useRoute();

//控制图案颜色
const reduColor = ref('black')
const jinghuaColor = ref('black')
const xinxianColor = ref('black')


//屏幕适配宽度方法
const postWidth = computed(() => {
  return window.innerWidth > 768 ? 16 : 24;
})





// #region 电脑端选择图案大div的移入移出事件
const SelectBtn = ref(false)

const enterSelectPost = (event) => {
  event.target.classList.add('selected');
}

const leaveSelectPost = (event) => {
  SelectBtn.value = true;

  event.target.classList.remove('selected');
}

// #endregion


// #region 手机端选择图案的点击事件
const selectPost = ref(null)
const handlePhoneClick = (event) => {
  // console.log(event.target);
  event.target.classList.toggle('selected');
}


// #endregion

//图案点击事件
//获取当前选择是什么优先
const currentSelect = ref(localStorage.getItem('currentSelect'))

const selectIcon = async (icon, event) => {
  //存在就是手机端
  if (selectPost.value) {
    selectPost.value.classList.remove('selected');
  }

  event.stopPropagation();  // 阻止事件冒泡

  if (icon === 1) {
    currentSelect.value = '回复';
    localStorage.setItem('currentSelect', '回复')
  } else if (icon === 2) {
    currentSelect.value = '发布';
    localStorage.setItem('currentSelect', '发布')
  } else {
    currentSelect.value = '精华';
    localStorage.setItem('currentSelect', '精华')
  }

  getCategoryPostList(currentPage.value)

}


//刷新页面
const refresh = () => {
  router.go()
}




// #region 分页代码
const currentPage = ref(1)

const handleChange = () => {
  getCategoryPostList(currentPage.value)

}
// #endregion


// #region 完整榜单drawer代码
const drawer = ref(false)
const simplePostAllList = ref([])

const openDrawer = async () => {
  await getSimplePostAllList()
  drawer.value = true
}

/* 获得整个分类的所有帖子 */
const getSimplePostAllList = async () => {
  const res = await getCategoryAllSimplePostApi(route.params.id)
  simplePostAllList.value = res.data
}




// #endregion


// #region 获取数据代码
const PostList = ref([])
const postTotal = ref(0)
const PostSimpleList = ref([])

const getCategoryPostList = async (currentPage = 1, categoryId = route.params.id) => {

  const res = await getCategoryPostListApi({ currentPage, categoryId, select: localStorage.getItem('currentSelect') })
  PostList.value = res.records
  postTotal.value = res.total
}

const getSimplePost = async (categoryId = route.params.id) => {
  const res = await getSimplePostApi(categoryId)
  PostSimpleList.value = res.data
}

// #endregion


//第一次进当前路由触发这个钩子

onMounted(async () => {

  //判断当前选择是什么优先
  if (localStorage.getItem('currentSelect') === null) {
    localStorage.setItem('currentSelect', '回复')
  }


  //获取当前分类下的帖子列表
  await getCategoryPostList()

  //获取当前分类下的右侧推荐帖子列表
  await getSimplePost()
})

//退出时销毁组件
//在切换分类的时候会复用组件，这样OnMounted是不会重新发送请求的，所以需要一个新的切换路由时调用的钩子
onBeforeRouteUpdate(async (to) => {

  await getCategoryPostList(undefined, to.params.id)

  //获取当前分类下的右侧推荐帖子列表
  await getSimplePost(to.params.id)
})

</script>


<template>

  <el-row class="post">
    <!-- 热帖 -->
    <el-col class="hot-post" :span="postWidth">

      <post v-for="item in PostList" :key="index" :postData="item"></post>


      <!-- 分页器 -->
      <el-pagination class="pagination" v-model:current-page="currentPage" :page-size="10" :size="size" background
        layout="total, prev, pager, next,jumper" :total="postTotal" @change="handleChange" :disabled="disabled" />

      <!-- 留白 -->
      <div style="height: 50px"></div>

    </el-col>
    <!-- 排行榜 -->
    <el-col :span="8" class="ranking  hidden-sm-and-down">
      <div class="title">
        <span>大家都在看</span>
        <a @click="openDrawer">查看榜单</a>
      </div>
      <SimplePost v-for="(item, index) in PostSimpleList" :key="item.postId" :simplePostData="item" :index="index">
      </SimplePost>
    </el-col>
  </el-row>


  <!-- 查看榜单的抽屉组件 -->
  <el-drawer size="36%" v-model="drawer" title="完整榜单" direction="rtl" :before-close="handleClose">
    <div class="allSimplePost">
      <SimplePost v-for="(item, index) in simplePostAllList" :key="item.postId" :simplePostData="item" :index="index">
      </SimplePost>
    </div>
  </el-drawer>


  <!-- 电脑端选择回复优先还是发布优先的按钮 -->
  <div @mouseenter="enterSelectPost($event)" @mouseleave="leaveSelectPost($event)"
    class="selectPost hidden-md-and-down">
    <div><span>{{ currentSelect }}</span></div>
    <el-tooltip effect="dark" content="回复优先" placement="top">
      <svg-icon class="svg" @click="selectIcon(1, $event)" @mouseenter=" reduColor = 'red'"
        @mouseleave="reduColor = 'black'" width="13" hight="13" :color="reduColor" name="redu"></svg-icon>
    </el-tooltip>

    <el-tooltip effect="dark" content="发布优先" placement="top">
      <svg-icon class="svg" @click="selectIcon(2, $event)" @mouseenter=" xinxianColor = 'red'"
        @mouseleave="xinxianColor = 'black'" width="13" hight="13" :color="xinxianColor" name="xinxian"></svg-icon>
    </el-tooltip>

    <el-tooltip effect="dark" content="精华帖" placement="top">
      <svg-icon class="svg" @click="selectIcon(3, $event)" @mouseenter=" jinghuaColor = 'red'"
        @mouseleave="jinghuaColor = 'black'" width="13" hight="13" :color="jinghuaColor" name="jinghua"></svg-icon>
    </el-tooltip>
  </div>


  <!-- 手机端选择回复优先还是发布优先的按钮 -->
  <div @click="handlePhoneClick($event)" @mouseleave="leaveSelectPost($event)" ref="selectPost"
    class="selectPost hidden-md-and-up">
    {{ currentSelect }}

    <svg-icon class="svg" @click="selectIcon(1, $event)" @mouseenter=" reduColor = 'red'"
      @mouseleave="reduColor = 'black'" width="13" hight="13" :color="reduColor" name="redu"></svg-icon>
    <svg-icon class="svg" @click="selectIcon(2, $event)" @mouseenter=" xinxianColor = 'red'"
      @mouseleave="xinxianColor = 'black'" width="13" hight="13" :color="xinxianColor" name="xinxian"></svg-icon>

    <svg-icon class="svg" @click="selectIcon(3, $event)" @mouseenter=" jinghuaColor = 'red'"
      @mouseleave="jinghuaColor = 'black'" width="13" hight="13" :color="jinghuaColor" name="jinghua"></svg-icon>
  </div>



  <!-- 手机端的的按钮  -->
  <div class="post-btn hidden-sm-and-up ">



    <!-- 手机端的刷新按钮和发布按钮 -->
    <el-button class="plus" @click="router.push('/publish')" type="primary" circle icon="Plus"></el-button>
    <el-button class="refresh" circle icon="RefreshRight" @click="refresh"></el-button>
  </div>
</template>

<style lang='scss' scoped>
.ranking {
  margin-top: 30px;
  padding-left: 20px;
}

.title {

  border: 1px solid rgb(193, 191, 191);
  display: flex;
  justify-content: space-between;
  padding: 10px;

  &>span:first-child {
    font-size: 18px;
    font-weight: bold;
  }

  &>a {
    color: rgb(34, 140, 182);

    &:hover {
      cursor: pointer;
      color: red;
    }
  }
}

/* 分页器 */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 50px;

}

//PC端样式
@media screen and (min-width: 768px) {


  .selectPost {
    position: fixed;
    top: 700px;
    right: 560px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: rgb(231, 228, 228);
    transition: transform 0.3s ease;
    /* 设置平滑过渡 */
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      &>div {
        display: none;
      }
    }

    .svg {
      display: none;
      transition: transform 0.5s ease;

      &:hover {
        cursor: pointer;
        transform: scale(1.2);
      }
    }
  }


  .allSimplePost {
    height: 80vh;
    overflow: auto;
  }


  // 选择回复优先还是发布优先的按钮
  .selected {
    /* 放大3倍 */
    transform: scale(3);

    .svg {
      display: block;
    }
  }


}


//移动端样式
@media screen and (max-width: 768px) {



  //选择按钮样式
  .selectPost {
    position: fixed;
    width: 50px;
    height: 50px;

    bottom: 170px;
    right: 30px;

    border-radius: 100%;
    background-color: rgb(231, 228, 228);
    transition: transform 0.3s ease;
    /* 设置平滑过渡 */
    display: flex;
    justify-content: center;
    align-items: center;


    .svg {
      display: none;
      transition: transform 0.5s ease;

      &:hover {
        cursor: pointer;
        transform: scale(1.2);
      }
    }

  }

  // 选择回复优先还是优先的按钮
  .selected {
    /* 放大3倍 */
    transform: scale(2);
    // display: none;
    font-size: 0;

    .svg {
      display: block;
    }
  }







  .post-btn {

    &>.plus,
    &>.refresh,
    &>.selectPost {
      position: fixed;
      width: 50px;
      height: 50px;
    }

    .el-button:active {
      // background-color: transparent;
      /* 或者设置为你想要的颜色 */
      box-shadow: none;
      /* 去除点击时的阴影效果 */
    }

    &>.plus {
      right: 30px;
      bottom: 30px;
    }

    &>.refresh {
      right: 30px;
      bottom: 100px;
    }
  }




}
</style>